<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理用户</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/manage_user.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="plugins/element-ui/index.css">

</head>

<body>
<!-- 这是导航栏 -->
<div class="nav">
    <img src="image/logo.png" alt="logo">
    <span class="head">我的博客系统</span>
    <!-- 空白元素, 用来占位置 -->
    <span class="spacer">欢迎来到知识海洋</span>
    <a href="#" id="logout" class="logout">退出</a>
    <a href="blog_register.html">注册</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left">
        <!-- 个人信息卡片 -->
        <div class="card">
            <img src="" alt="我的头像" id="myphoto">
            <h3></h3>
            <div class="counter">
                <a target="_blank" id="git">我的Gitee</a>
            </div>
            <h6></h6>
            <div class="counter">
                <a href="user_update.html">修改个人资料</a>
            </div>
        </div>
    </div>
    <div class="right">
        <!-- 右侧内容详情 -->
        <div class="dashboard-container" id="user-app">
            <div class="container2">
                <div class="tableBar">
                    <el-input v-model="input" placeholder="请输入用户名查找" style="width: 250px" clearable
                              @keyup.enter.native="handleQuery">
                        <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer"
                           @click="handleQuery"></i>
                    </el-input>
                </div>
                <el-table :data="tableData" stripe class="tableBox">
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="identity" label="用户身份">
                        <template slot-scope="scope">
                            <span v-if="scope.row.identity === 0">普通用户</span>
                            <span v-else-if="scope.row.identity === 1">管理员</span>
                            <span v-else-if="scope.row.identity === 2">超级管理员</span>
                        </template>

                    </el-table-column>
                    <el-table-column label="操作" width="160" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" class="delBut non"
                                       @click="identityHandle(scope.row)">
                                {{ scope.row.identity == '1' ? '修改为普通用户' : '修改为管理员' }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pageList" :page-sizes="[5, 10, 20, 30, 40]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="counts"
                               :current-page.sync="page"
                               @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
    </div>

</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./plugins/element-ui/index.js"></script>
<script>
    //处理退出登录请求
    let logoutD = document.querySelector(".logout");
    logoutD.onclick = function () {
        jQuery.getJSON("login/out", {},
            function (data) {
                if (data.status == 1) {
                    alert(data.message);
                    window.location.href = 'blog_login.html'
                }
            }
        )
    }
    //使用ajax请求，向服务器获取当前用户的登录状态
    jQuery.getJSON("home/myMse", {},
        function (obj) {
            if (obj.status == -1) {
                alert(obj.message);
                window.location.href = 'blog_update.html';
            } else {
                buildUser(obj.data);
            }
        }
    )

    function buildUser(user) {
        //根据服务器返回的用户信息，来修改页面的显示内容
        let h3 = document.querySelector('.card>h3');
        h3.innerHTML = user.username;
        let h6 = document.querySelector('.card>h6');
        h6.innerHTML = user.signature;
        let gitee = document.querySelector('#git');
        gitee.href = user.gitee;
        let photo = document.querySelector('#myphoto');
        photo.src = user.img;
    }
</script>
<script>
    new Vue({
        el: '#user-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                identity: '',
            }
        },
        computed: {},
        created() {
            this.init()
            $.ajax({
                type: 'get',
                url: 'admin/getNowUser',
                success: function (respData) {
                    if (respData.status == 1) {
                        this.user = respData.data;
                    } else {
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function () {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            })
        },
        mounted() {
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input ? this.input : undefined
                }
                try {
                    const respData = await $.ajax({
                        type: 'get',
                        url: 'admin/page',
                        data: params,
                    })

                    if (respData.status == 1) {
                        this.tableData = respData.data.records;
                        this.counts = this.tableData.length;
                    } else {
                        $.toast({
                            heading: '警告',
                            text: '警告',
                            icon: 'warning'
                        });
                    }
                } catch (error) {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }

            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            //状态修改
            identityHandle(row) {
                this.id = row.id
                this.identity = row.identity
                var self = this; // 保存当前上下文
                this.$confirm('确认修改账号的身份?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'status': 'warning'
                }).then(() => {
                    $.ajax({
                        type: 'post',
                        url: 'admin/updateIdentityByUserId',
                        data: {
                            id: this.id,
                            identity: this.identity ? 1 : 0
                        },
                        contentType: 'application/x-www-form-urlencoded',
                        success: function (respData) {
                            if (respData.status == 1) {
                                self.handleQuery();
                            } else {
                                alert(respData.message);
                                self.handleQuery();
                            }
                        }
                    })
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            }
        }
    })
</script>
</body>

</html>